<template>
	<div>
		<div class="textTile flex-h">
		
			<span class="sp1 flex1">职业价值观测试</span>
			<span class="sp2"><b>{{tabNum+1}}</b><i>/60</i></span>
		</div>
		<div v-for="(item,index) in worthData.history" :key="index">
			<div class="textQuestions" v-show="index===tabNum">
				<span>{{item.issue}}</span>
			</div>


			<div class="commonBox worth flex-h" v-show="index===tabNum">
				<span class="flex1 sp2" @click="clzyjz(item.type,index,1)">
					<i class="i1"></i>
					<b>很不重要</b>
				</span>
				<span class="flex1 sp2" @click="clzyjz(item.type,index,2)">
					<i class="i2"></i>
					<b>较不重要</b>
				</span>
				<span class="flex1 sp2" @click="clzyjz(item.type,index,3)">
					<i class="i3"></i>
					<b>一般</b>
				</span>
				<span class="flex1 sp2" @click="clzyjz(item.type,index,4)">
					<i class="i4"></i>
					<b>比较重要</b>
				</span>
				<span class="flex1 sp2" @click="clzyjz(item.type,index,5)">
					<i class="i5"></i>
					<b>非常重要</b>
				</span>

			</div>
		</div>
	</div>
</template>

<script>
	import ls from 'store2';
	import worthData from '~/static/json/workValues.json'
	export default {
		props: {
			// 			message: String,
			// 			col: String
		},
		components: {
			// specIssue
		},
		data() {
			return {		
				tabNum: 0,
				worthData: worthData,
				zyjzgScore:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
			};
		},
		computed: {

		},
		mounted: function() {
			console.log('worthData',worthData)
		},
		methods: {
			clzyjz(typs, indexs, score) {
				// this.tabNum = indexs + 1;
				switch (typs) {
					case "1":
						this.zyjzgScore[0]+=score
						break;
					case "2":
						this.zyjzgScore[1]+=score
						break;
					case "3":
						this.zyjzgScore[2]+=score
						break;
					case "4":
						this.zyjzgScore[3]+=score
						break;
					case "5":
						this.zyjzgScore[4]+=score
						break;
					case "6":
						this.zyjzgScore[5]+=score
						break;
					case "7":
						this.zyjzgScore[6]+=score
						break;
					case "8":
						this.zyjzgScore[7]+=score
						break;
					case "9":
						this.zyjzgScore[8]+=score
						break;
					case "10":
						this.zyjzgScore[9]+=score
						break;
					case "11":
						this.zyjzgScore[10]+=score
						break;
					case "12":
						this.zyjzgScore[11]+=score
						break;
					case "13":
						this.zyjzgScore[12]+=score
						break;
					case "14":
						this.zyjzgScore[13]+=score
						break;
					default:
						this.zyjzgScore[14]+=score
				}
				console.log('this.zyjzgScore', this.zyjzgScore)
				if (this.tabNum === 59) {			
					console.log('我要跳转了')
					let obj={
						status:2,
						worthScore:this.zyjzgScore
					}
					ls.set('resultPar',obj)
					this.commonJs.gosto('IndResult')
				} else {
					this.tabNum = indexs + 1;
				}
// 				if(this.tabNum===60){
// 					console.log('我要跳转了')
// 					let obj={
// 						status:2,
// 						worthScore:this.zyjzgScore
// 					}
// 					ls.set('resultPar',obj)
// 					this.goto('IndResult')
// 				}
			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			}
		}
	};
</script>


<style scoped lang="less">
		.textTile {
		padding-bottom: 0.4rem;
		height: auto;
		width: 100%;
		border-bottom: 0.01rem solid rgba(238, 238, 238, 1);
	
		.sp1 {
			font-size: 0.4rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.44rem;
		}
	
		.sp2 {
			b {
				font-size: 0.4rem;
				font-weight: bold;
				color: rgba(108, 191, 32, 1);
			}
	
			i {
				font-size: 0.22rem;
				font-weight: bold;
				color: rgba(187, 187, 187, 1);
				// line-height:30px;
			}
		}
	}
	.textQuestions {
		width: 100%;
		height: auto;
		padding-top: 0.3rem;
	
		span {
			font-size: 0.32rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.45rem;
		}
	}
	
		.commonBox {
		position: absolute;
		width: 100%;
		height: 0.9rem;
		left: 0;
		bottom: 0.4rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}
	.worth {
		.sp2 {
	
			i,
			b {
				display: block;
			}
	
			i {
				height: 0.35rem;
				width: 0.35rem;
				margin: 0 auto;
			}
	
			.i1 {
				background: url('~static/images/icon_star_1.png') no-repeat;
				background-size: 100% 100%;
			}
	
			.i2 {
				background: url('~static/images/icon_star_2.png') no-repeat;
				background-size: 100% 100%;
			}
	
			.i3 {
				background: url('~static/images/icon_star_3.png') no-repeat;
				background-size: 100% 100%;
			}
	
			.i4 {
				background: url('~static/images/icon_star_4.png') no-repeat;
				background-size: 100% 100%;
			}
	
			.i5 {
				background: url('~static/images/icon_star_5.png') no-repeat;
				background-size: 100% 100%;
			}
	
			b {
				height: 0.55rem;
				text-align: center;
				line-height: 0.55rem;
				font-size: 0.22rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
			}
		}
	}
</style>
